<template>
    <el-form-item label="合同编号">
        <div @click="clickHandler" class="clickBtn">
            <el-input v-model="contactCd" readonly>
                <template slot="append">
                    <a href="javascript:;" style="font-size: 20px">
                        <i class="el-icon-more"></i>
                    </a>
                </template>
            </el-input>
        </div>
        <div>
            <el-dialog
                    append-to-body
                    ref="mydialog"
                    title="合同编号选项"
                    :visible.sync="show"
                    :withHeader="false"
                    class="m-dialog"
                    :close-on-click-modal="false"
                    @close="closeDialog"
            >
                <div class="slot-table">
                    <vxe-grid
                            ref="slotTable"
                            max-height="500"
                            border
                            highlight-hover-row
                            :form-config="tableForm"
                            :data="tableData"
                            :columns="tableColumn"
                            @cell-click="cellClickEvent"
                            @form-submit="findList"
                    >
                    </vxe-grid>
                    <!--highlight-hover-row:高亮当前行
                        :form-config : 表单配置文件
                        :data : 表格数据
                        :columns : 列配置
                        @form-submit ： 只对 form-config 配置时有效，表单提交时会触发该事件
                        @cell-click：表格单击事件-->
                </div>
            </el-dialog>
        </div>
    </el-form-item>
</template>

<script>
    import OrderService from "@/api/order/OrderService.js";
    import mixinstype20 from "../mixins/mixinstype20";
    export default {
        mixins: [mixinstype20],
        name: "ContractChange",
        props: {
            value: {
                type: String,
                default: "",
            },
            text: {
                type: String,
            },
        },
        data() {
            return {
                config: {
                    "10461176-100010037": {
                        colType: "C",
                        id: "100010037",
                        text: "",
                        colId: "contactCd",
                        value: "",
                        fieldId: "contactCd",
                        tableName: "ORD_PROD_INST",
                    },
                    "10461176-142003017": {
                        colType: "C",
                        id: "142003017",
                        text: "",
                        colId: "contactName",
                        value: "",
                        fieldId: "contactName",
                        tableName: "ORD_PROD_INST",
                    },
                    "10461176-100010038": {
                        colType: "C",
                        id: "100010038",
                        text: "",
                        colId: "contactId",
                        value: "",
                        fieldId: "contactId",
                        tableName: "ORD_PROD_INST",
                    },
                },
                contactCd: "",
                show: false,
                loading: false,
                tableData: [],
                tableColumn: [
                    {field: "contractcode", title: "合同编号", width: "50%"},
                    {field: "contractname", title: "合同名称", width: "50%"},
                ],
                tableForm: {
                    items: [
                        {
                            field: "contractcode",
                            title: "合同编号：",
                            itemRender: {
                                name: "input",
                                attrs: {placeholder: ""},
                            },
                        },
                        {
                            field: "contractname",
                            title: "合同名称：",
                            itemRender: {
                                name: "input",
                                attrs: {placeholder: ""},
                            },
                        },
                        {
                            itemRender: {
                                name: "$button",
                                props: {content: "查询", type: "submit", status: "primary"},
                            },
                        },
                    ],
                    data: {
                        contractcode: "",
                        contractname: "",
                    }, //这个data一定要加，否则无法获取查询参数
                },
            };
        },
        created() {
            
            Object.assign(this.formData, this.config);
        },
        mounted() {
            this.loadContactCdOptions();
        },
        methods: {
            /**
             * 单机输入框触发
             */
            clickHandler() {
                this.show = true;
                //数据被更新了，Vue.nextTick 就会触发, 将回调延迟到下次 DOM 更新循环之后执行
                this.$nextTick(() => {
                    this.loadContactCdOptions();
                })
            },
            /**
             * 单击单元格触发
             */
            cellClickEvent() {
                
                this.show = false;
                this.contactCd = arguments[0].row.contractcode;
                this.formData['10461176-100010037'].value = arguments[0].row.contractcode;
                this.formData['10461176-142003017'].value = arguments[0].row.contractname;
                this.formData['10461176-100010038'].value = arguments[0].row.contractid;

            },

            /**
             * 查找表格数据
             */
            async findList() {
                this.loadContactCdOptions()
            },

            /**
             * 弹窗关闭表单重置
             */
            closeDialog() {
                this.tableForm.data.contractcode = "";
                this.tableForm.data.contractname = "";
 
            },

            /**
             * 合同编码回传
             */
            getRowContactCdHandler(row) {
                this.FormModel.contactName = row.contractname;
                this.FormModel.contactCd = row.contractcode;
                this.FormModel.contactid = row.contractid;

            },

            /**
             * 合同编码请求
             */
            async loadContactCdOptions() {
                let booleanType = (this.tableForm.data.contractcode !== "" || this.tableForm.data.contractname !== "") ? 1 : 0;
                let obj = {
                    requestObject: {
                        contractJson: {
                            contractcode: this.tableForm.data.contractcode.trim(),
                            contractname: this.tableForm.data.contractname.trim(),
                            itemcode: "",
                            itemname: "",
                            type: booleanType,
                            page: {pageNo: 1, pageSize: 10,},
                        },
                    },
                };
                let res = await OrderService.qryContractList(obj);
                
                if (res.code == 200) {
                    this.tableData = res.meta || [];
                }
            },

        },
    };
</script>

<style lang="scss" scoped>
    .clickBtn {
        ::v-deep .el-input-group--append .el-input__inner, .el-input-group__prepend {
            cursor: pointer;
        }
    }

    .slot-table {
        ::v-deep .myrow {
            cursor: pointer;
        }
    }
</style>
